require('../css/commCss/normalize.css')
require('../css/commCss/reset.css')
require('../css/commCss/property.css')
require('../lib/flexible')
require('../font/iconfont.css')
require('../css/exerciseData.less')
    //引入axios
const axios = require('axios')
const { time } = require('echarts')

const echars = require('echarts')

document.addEventListener('DOMContentLoaded', function() {

    const times = document.querySelector('#times')
    const imgurl = document.querySelector('#imgurl')
    const calorie = document.querySelectorAll('.calorie')
    const punchin = document.querySelector('#punchin') //累积天数
    const insignianum = document.querySelector('#insignianum') //连续天数

    let userId = localStorage.userId

    //#region
    axios.get('http://139.9.177.51:8099/users/mysportsBadge/', { params: { userId } })
        .then(function(res) {
            // console.log(1);
            let sports = res.data.data.sports
            let user = res.data.data.user
                // console.log(user);
            times.textContent = sports.times
            imgurl.src = user.imgurl
            calorie.textContent = sports.calorie
            calorie[0].textContent = sports.calorie.toFixed(2)
            calorie[1].textContent = sports.calorie.toFixed(2)
            punchin.textContent = sports.punchin
            insignianum.textContent = sports.insignianum
        })
        //#endregion

    //运动数据
    let xData = ['2/11', '2/12', '2/13', '2/14', '2/15', '2/16', '2/17']
    let yData = [80, 52, 200, 334, 390, 330, 220]
    drawColumn(xData, yData)

    function drawColumn(x, y) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echars.init(document.querySelector('#column'))
            // 指定图表的配置项和数据
        var option = {
            //标题
            title: {
                text: '近7天运动时长'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'category',
                data: x,
                axisTick: {
                    alignWithLabel: true
                }
            }],
            yAxis: [{
                type: 'value'
            }],
            series: [{
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: y
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    drawSector()

    function drawSector() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echars.init(document.querySelector('#sector'))
            // 指定图表的配置项和数据
        var option = {
            title: {
                text: '运动分类',
                // subtext: 'Fake Data',//副标题文本
                left: 'left'
            },
            //提示
            tooltip: {
                trigger: 'item'
            },
            //图例
            legend: {
                orient: 'vertical',
                left: 'left',
                top: 'center',
                itemWidth: 15,
                itemHeight: 15,
                icon: 'rect'
            },
            //核心数据
            series: [{
                // name: 'Access From',//副标题文本
                label: {
                    position: 'inside',
                    formatter: '{d}%',
                    color: '#fff'
                },
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: '跑步', itemStyle: { color: 'pink' } },
                    { value: 735, name: '骑行' },
                    { value: 580, name: '运动' }
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


    }

    drawStack()

    function drawStack() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echars.init(document.querySelector('#stack'))
            // 指定图表的配置项和数据
        var option = {
            title: {
                text: '进7日运动分类',
                // subtext: 'Fake Data',//副标题文本
                left: 'left'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            //图例
            legend: {
                top: 'center',
                right: 'left',
                orient: 'vertical',
                itemHeight: 10,
                itemWidth: 10,
                icon: 'rect'
            },
            grid: {
                left: '3%',
                right: '12%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['2/11', '2/12', '2/13', '2/14', '2/15', '2/16', '2/17']
            },
            series: [{
                    name: '跑步',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 302, 301, 334, 390, 330, 320],
                    itemStyle: {
                        color: 'pink'
                    }
                },
                {
                    name: '骑行',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '训练',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


    }

    drawBroken()

    function drawBroken() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echars.init(document.querySelector('#broken'))
            // 指定图表的配置项和数据
        var option = {
            xAxis: {
                type: 'category',
                data: ['2/11', '2/12', '2/13', '2/14', '2/15', '2/16', '2/17']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [150, 230, 224, 218, 135, 147, 260],
                itemStyle: {
                    color: '#8371c1'
                },
                type: 'line'
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


    }

})